<template>
  <div  v-infinite-scroll="load"  class="infinite-list" infinite-scroll-disabled="disabled" style="overflow:auto">
  <div class="PageContent" v-for="value in contentArr">
    <div class="PageContentMain">
      <div class="userInfo">
        <div class="userDetails">
          <div class="userPortrait" v-if="value.get_user.user_info"><img :src="value.get_user.user_info[0].port"></div>
          <div class="userPortrait" v-else></div>
          <div class="TimeName">
            <h5>{{value['get_user']['name']}}</h5>
            <p>时间</p>
          </div>
        </div>
        <div class="more"><img src="../../public/img/更多.png"></div>
      </div>
      <div class="App">
        <div>
          <div class="editor"><img src="../../public/img/应用.png"><span>tinymce-editor</span></div>
          <div class="editor editorT"><img src="../../public/img/地址.png"><span>中国</span></div>
        </div>
        <div>
          <div class="Collection AppRight"><img src="../../public/img/收藏2.png" @click="Like(value.id)"></div>
          <div class="news AppRight"><img src="../../public/img/消息2.png"></div>
        </div>
      </div>
      <h4 @click="jump(value.id)">{{value.title}}</h4>
      <div class="classification">
        <div>
          <img src="../../public/img/文件夹.png"><span>{{value['get_directory'].name}}</span>
        </div> <span>{{value.count}}/{{value.currentKey}}</span>
      </div>
      <div class="PageText" @click="jump(value.id)" v-html="value.content"></div>
      <div class="PageLabel">
          <el-tag class="tag"
    v-for="item in items"
    :key="item.label"
    :type="item.type"
    effect="dark">
    {{ item.label }}
  </el-tag>
      </div>

    </div>
    <div class="PageFooter">
      <div class="PageFooterMain">
        <div class="PageFooterLeft">
          <div class="PageLike">
            <div><img src="../../public/img/喜欢.png"><span>喜欢</span></div><div class="userLike"><div  v-for="item in HandelPort(value.get_user_like)"><img :src="item.get_user[0].port"></div><span v-if="value.get_user_like.length > 3">......</span><div class="userLikeNum">{{value.get_user_like_count_count}}</div></div>
          </div>
          <div class="comment">
            <div><img src="../../public/img/评论2.png"><span>评论&nbsp;&nbsp;{{value.get_comment_count}}</span></div>
          </div>
        </div>
        <div class="PageFooterRight">
          <div class="comment">
            <div><img src="../../public/img/查看.png"><span>浏览&nbsp;&nbsp;{{value['get_browse_count']}}</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
    <p v-if="loading" class="loadTo">加载中...</p>
    <p v-if="noMore" class="loadTo" >没有更多了</p>
  </div>
</template>

<script>
export default {
name: "BlogHomeList",

  data(){
    return {
      contentArr:[],
      loading:false,
      currentNum:1,
      num:'',
      items: [
          { type: 'success', label: '标签一' },
          { type: 'info', label: '标签二' },
          { type: 'info', label: '标签三' },
          { type: 'danger', label: '标签四' },
          { type: 'warning', label: '标签五' }
        ] 
    }
  },

  methods:{
  Like(id){
    var request = this.myCode();
    var config = {
      method:'get',
      url:'/SetLike',
      params:{
        'BlogId':id,
        'api_token':localStorage.getItem('API')
      }
    };
    request(config).then(res=>{
       if(res.data.status == 200){
            alert('收藏成功');
       }else{
           alert('已经收藏过啦');
       }
    })
  },
  jump(id){
   const {href} =   this.$router.resolve({name:'BlogDetails',query:{
         'id':id
        }})
    window.open(href, '_blank');
  },
    load () {
      this.loading = true;
      setTimeout(() => {
        var request = this.myCode();
        var params={
          'currentNum':this.currentNum,
          'value':'',
          'jude':1
        }
        if(this.$route.query.value){
          params.value = this.$route.query.value;
        }
        var config = {
          method:'get',
          url:'/GetBlogContent',
           params
        };
        request(config).then((res)=>{
          for (var i=0;i<res.data.data.length;i++){
              this.contentArr.push(res.data.data[i]);
          }
          this.loading = false
        })
        this.currentNum++;
      }, 2000)
    },
    HandelContent(content) {
      var Hand =    new this.HandString();
      return  Hand.HandelContent(content,200,true);
    },
    HandelPort(arr){
      var atm = []
      for (let i =0;i<arr.length;i++){
               if(i == 3){
                 return atm
               }
         atm.push(arr[i])
      }
      return atm
    }
  },
  created() {
   var params={
      'currentNum':this.currentNum,
      'value':'',
     'jude':1
    }
    if(this.$route.query.value){
          params.value = this.$route.query.value;
    }

    var request = this.myCode();
    var config = {
      method:'get',
      url:'/GetBlogContent',
      params
    };
    request(config).then((res)=>{
      console.log(res);
      this.contentArr = res.data.data;
      this.num = res.data.num['last_page'];
      this.currentNum++;
       console.log(this.contentArr[0]);
    })
  },
  computed:{
    noMore () {
      return this.currentNum >this.num
    },
    disabled () {
      return this.loading || this.noMore
    }
  }
}
</script>

<style scoped>
.tag:nth-child(n+2){
  margin-left: 10px;
}
.loadTo{
  background-color: white;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  font-family: 微軟正黑體;
}
.PageContent{
  background-color: white;
  margin-top: 30px;
  overflow: hidden;
}
.PageContentMain{
  width: 90%;
  margin: 0 auto;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.PageContentMain{
  padding-top: 30px;
}
.userDetails{
  display: flex;
}
.userInfo{
  display: flex;
  justify-content: space-between;
}
.more{
  display: flex;
  align-items: center;
}
.more img{
  width: 30px;
}
.TimeName{
  margin-left: 20px;
  font-family: 微軟正黑體;
}
.userPortrait{
  width: 50px;
  height: 50px;
  background-color: #555555;
  border-radius: 50%;
  overflow: hidden;
}
.userPortrait img{
   width: 100%;

}
.TimeName p {
  margin-top: 3px;
  font-size: 13px;
  color: #6d737b;
}
.App{
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.editor{
  display: flex;
  align-items: center;
  font-family: "Arial Hebrew", Arial, sans-serif;
  font-size: 13px;
}
.editor img{
  width: 15px;
}
.editor span{
  margin-left: 5px;
  color: #6d737b;
}
.App>div{
  display: flex;
}
.editorT{
  margin-left: 20px;
}
.Collection{
  background-color: #00d084;
  margin-right: 10px;
}
.Collection img{
  width: 25px;
}
.AppRight{
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
.news{
  background-color: #df7d43;
}
.news img{
  width: 20px;
}
.PageContentMain>h4{
  margin-top: 15px;
  font-size: 15px;
  font-family: 微軟正黑體;
  cursor: pointer;
}
.classification{
  display: flex;
  margin-top: 15px;
}
.classification>div{
  background-color: #4d545c;
  color: white;
  display: flex;
  font-size: 11px;
  padding-top: 5px;
  padding-bottom: 3px;
  border-radius: 10px;
  padding-left: 5px;
  padding-right: 5px;
}
.classification img{
  width: 15px;
}
.classification>span{
  display: flex;
  align-items: center;
  margin-left: 40px;
  font-size:15px;
  color: #6d737b;
}
.PageText{
  margin-top: 20px;
  font-size: 13px;
  line-height: 25px;
  font-family: 微軟正黑體;
}
.PageText >>> span{
  cursor: pointer;
}
.PageLabel{
  display: flex;
  margin-top: 20px;
  padding-bottom: 40px;
}
.PageLabel>div{
  background-color: #cdcdcd;
  padding: 5px 10px 5px 10px;
  border-radius: 12px;
  color: #707070;
  font-size: 12px;
  font-family: 微軟正黑體;
}
.PageLabel>div:nth-child(n+2){
  margin-left: 15px;
}
.PageFooter{
  border-top: 1px #e6e6e6 solid;
}
.PageFooterMain{
  width:90%;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.PageFooterLeft{
  display: flex;
}
.comment{
  margin-left: 20px;
}
.PageLike,.comment{
  display: flex;
  font-size: 14px;
  font-family: 微軟正黑體;
  align-items: center;
}
.PageLike>div,.comment>div{
  display: flex;
  align-items: center;
  /*box-sizing: border-box;*/
}
.PageLike span,.comment span{
  margin-left: 5px;
  vertical-align: top;
}
.PageLike img{
  width: 20px;
}
.comment img{
  width: 20px;
}
.userLike{
  display: flex;
  margin-left: 10px;
}
.userLike>div{
  background-color: #555555;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  overflow: hidden;
}
.userLike>div img{
  width: 100%;
  min-height: 100%;
}
.userLike .userLikeNum{
  background-color: #e04e38;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: "Arial Hebrew", Arial, sans-serif;
}
</style>